<template>
	<div style="overflow: hidden;" class="navigation-pc-panel">
		<div class="navigation-layout" @click.stop="hidePopOver" :style="{'height': layoutHeight,'margin-top': (isHighSecurity  && !showMobileEntry)?'10px':'0px'}">
			<div class="navigation-layout-left" :style="{'height': layoutHeight,'margin-top': (isHighSecurity  && !showMobileEntry)?'10px':'0px'}">
				<div class="toggle" :class="layout.toggleClass" :title="layout.isCollapse?$t('收起'):$t('展开')" @click="changeLayoutPanel">
					<i class="awsui-iconfont" v-html="layout.icon"></i>
				</div>
				<div class="navigation-layout-left-content" :style="{width: layout.leftWidth + 'px'}" v-show="layout.leftSideBarShow">
					<left-navigation @treeNodeClick="getTreeNodeData"
									 ref="leftNavigation"
									 :hasManagerAC="hasManagerAC"
									 :isSubAdmin="isSubAdmin"
									 :currentAppId="currentAppId"
									 :currentNavId="currentNavId"
									 :isYijingCloud="isYijingCloudFlag"
									 :visitAcLength="visitAcLength"
					></left-navigation>
				</div>
			</div>
			<div class="navigation-layout-main">
				<visit-ac-info @visitAcSize="getVisitAcSize" :treeNodeData="treeNodeData" :treeNodeSize="treeNodeSize" :isYijingCloud="isYijingCloudFlag"  :isYijingStandard="isYijingStandardFlag"></visit-ac-info>
			</div>
		</div>
	</div>
</template>
<script>
	import LeftNavigation from "@/views/left/LeftNavigation.vue";
	import VisitAcInfo from "@/views/main/VisitAcInfo.vue";
	export default {
		name: 'NavHome',
		components: {LeftNavigation, VisitAcInfo},
		props: {
			hasManagerAC: {
				type: Boolean
			},
			isSubAdmin: {
				type: Boolean
			},
			currentAppId: {
				type: String
			},
			isYijingCloud: {
				type: Boolean
			},
			isYijingStandard: {
				type: Boolean
			},
			currentNavId: {
				type: String
			},
		},
		data() {
			return {
				height: (document.documentElement.clientHeight - 55) + 'px',
				clientWidth: document.documentElement.clientWidth,
        layoutHeight:"calc(100vh - 55px)",
				layout: {
					icon: "&#xe837;",
					rightIcon: "&#xe838;",
					leftIcon: "&#xe837;",
					isCollapse: true,
					leftWidth: 300,
					toggleClass: "toggleShow",
					leftSideBarShow: true,
				},
				treeNodeData: {},
				treeNodeSize:-1,
				isYijingCloudFlag: this.isYijingCloud,
				isYijingStandardFlag:this.isYijingStandard,
				visitAcLength:0,
        isHighSecurity:settingParam.isHighSecurity,
        showMobileEntry:settingParam.showMobileEntry,
			}
		},
		mounted() {
      if(this.isHighSecurity && !this.showMobileEntry){
        this.layoutHeight = "calc(100vh - 10px)";
      }else{
        this.layoutHeight = "calc(100vh - 55px)";
      }
			window.addEventListener('resize', function () {
				//that.resizeLayout();
			});
		},
		watch: {
			isYijingCloud(val) {
				this.isYijingCloudFlag = val;
			}
		},
		methods: {
			hidePopOver() {
				this.$refs.leftNavigation.hideNavigationDataOpVisiable();
			},
			getVisitAcSize(size) {
 				if(size!=undefined){
					this.visitAcLength = size;
				}
			},
			getTreeNodeData(data,size) {
				this.treeNodeData = data;
				if(size==undefined){
					this.treeNodeSize = 0;
				}else{
					this.treeNodeSize = size;
				}
			},
			changeLayoutPanel() {
				let $this = this;
				var that = this;
				if (that.layout.isCollapse) {
					that.layout.icon = that.layout.rightIcon;
					that.layout.leftWidth = 0;
					that.layout.toggleClass = "toggleHide";
					that.layout.leftSideBarShow = false;
					that.resizeLayout("hide");
				} else {
					that.layout.icon = that.layout.leftIcon;
					that.layout.leftWidth = 300;
					that.layout.toggleClass = "toggleShow";
					that.layout.leftSideBarShow = true;
					that.resizeLayout("show");
				}
				that.layout.isCollapse = !that.layout.isCollapse;
			},
			resizeLayout(type) {
				let $this = this;
				var that = this;
				if (type == "hide") {
					document.querySelector(".navigation-layout-main").style.width = "calc(100%)";
					document.querySelector(".navigation-layout-main").style.left = that.layout.leftWidth + "px";
				} else {
					document.querySelector(".navigation-layout-main").style.width = "calc(100% - 300px )";
					document.querySelector(".navigation-layout-main").style.left = that.layout.leftWidth + "px";
				}

			}
		}
	}
</script>
<style scoped>
	.navigation-layout{
		height:calc(100vh - 55px);
	}
	.navigation-layout .navigation-layout-left {
		position: absolute;
		top: 0px;
		max-width: 300px;
		min-height: calc(100vh - 55px);
		z-index: 10;
	}

	.navigation-layout .navigation-layout-left .toggle {
		width: 20px;
		height: 28px;
		line-height: 28px;
		position: absolute;
		z-index: 100;
		top: 15px;
		text-align: center;
		text-decoration: none;
		border: 1px solid #dce3e8;
		color: #666666;
		font-size: 16px;
		transform: translate(0, -50%);
		cursor: pointer;
	}

	.toggleShow {
		border-right: none !important;
		right: 0px;
		border-radius: 5px 0px 0px 5px;
	}

	.toggleShow i {
		float: right;
	}

	.toggleHide {
		border-left: none !important;
		right: -22px;
		border-radius: 0px 5px 5px 0px;
	}

	.toggleHide i {
		float: left;
	}

	.navigation-layout .navigation-layout-left .toggle:hover {
		border: 1px solid #3383da;
		border-left: none;
		background: #3383da;
		color: #fff;
		box-shadow: 1px 0 5px #3383da;
	}

	.navigation-layout .navigation-layout-main {
		min-height: calc(100% - 65px);
		border-left: 1px solid #dce3e8;
		position: absolute;
		left: 300px;
		z-index: 1;
		width: calc(100% - 300px);
		height: calc(100%);
		overflow: hidden;
	}
</style>
<style>
	.el-overlay.is-message-box {
		display: block !important;
	}

	.el-overlay .el-drawer.rtl {
		-webkit-animation: none !important;
		animation: none !important;
		right: 0 !important;
	}
</style>